<template>
    <div class="inspection-item">
        <div class="header">{{ info.title }}</div>
        <div class="body">
            <div class="baseinfo">
                <!-- 非施工点专项检查 -->
                <el-row v-if="info.inspectionType!==8" :gutter="24">
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">方向：</span>
                        <span>{{ info.directionName }}</span>
                    </el-col>
                    <!-- 涵洞 begin -->
                    <template v-if="info.inspectionType===3">
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">涵洞名称：</span>
                            <span>{{ info.name }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">涵洞桩号：</span>
                            <span>{{ info.stake }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">涵洞类型：</span>
                            <span>{{ info.type }}</span>
                        </el-col>
                    </template>
                   
                    <!-- 涵洞 end -->
                    <!-- 桥梁 begin -->
                    <template v-if="info.inspectionType===4">
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">桥梁名称：</span>
                            <span>{{ info.name }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">中心桩号：</span>
                            <span>{{ info.stake }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">桥梁编号：</span>
                            <span>{{ info.code }}</span>
                        </el-col>
                    </template>
                    <!-- 桥梁 end -->
                    <!-- 路基边坡 begin -->
                    <template v-if="info.inspectionType===5">
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">段落桩号：</span>
                            <span>{{ info.stake }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">名称：</span>
                            <span>{{ info.name }}</span>
                        </el-col>
                    </template>
                    <!-- 路基边坡 end -->
                    <!-- 隧道土建/隧道机电 begin -->
                    <template v-if="info.inspectionType===6||info.inspectionType===7">
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">隧道名称：</span>
                            <span>{{ info.name }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">中心桩号：</span>
                            <span>{{ info.stake }}</span>
                        </el-col>
                    </template>                    
                    <!-- 隧道土建/隧道机电 end -->
                    
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">本期检查：</span>
                        <span>{{ info.currentCheckDate }}</span>
                    </el-col>
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">上期检查：</span>
                        <span>{{ info.lastCheckDate }}</span>
                    </el-col>
                </el-row>
                <!-- 施工点专项检查 -->
                <el-row v-else :gutter="24">
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">检查位置：</span>
                        <span>{{ info.locationTypeName }}</span>
                    </el-col>
                    <el-col :xl="6" :lg="8" class="item">
                        <span v-if="info.locationType===1" class="label">设施名称：</span>
                        <span v-if="info.locationType===2" class="label">桩号：</span>
                        <span v-if="info.locationType===3" class="label">桩号范围：</span>
                        <span v-if="info.locationType===4" class="label">设备名称：</span>
                        <span v-if="info.locationType===2||info.locationType===3">{{ info.stake }}</span>
                        <span v-else>{{ info.name }}</span>
                    </el-col>
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">位置补充描述：</span>
                        <span>{{ info.locationDescription }}</span>
                    </el-col>
                    <el-col :span="24" class="item">
                        <span class="label">检查情况：</span>
                        <span>{{ info.inspectionResult }}</span>
                    </el-col>
                    <el-col :span="24" class="item">
                        <span class="label">整改情况：</span>
                        <span>{{ info.rectificationResult }}</span>
                    </el-col>
                </el-row>
            </div>
            <template v-if="info.inspectionType!==8">
                <div class="images-list">
                    <div class="label">图片：</div>
                    <div v-if="info.photos" class="images-container">
                        <ImageViewer :image-description="false" :images="info.photos.split(',').map(el => ({url:el}))" />
                    </div>
                </div>
            </template>
            <template v-if="info.inspectionType===8">
                <div class="images-list">
                    <div class="label">图片：</div>
                    <div v-if="info.photosArray" class="images-container">
                        <ImageViewer :images="info.photosArray" />
                    </div>
                </div>
            </template>
            <template v-if="info.inspectionType!==8&&info.content">
                <div style="margin-bottom:10px">检查情况：</div>
                <DetectTable :columns="columns" :list="info.content.map((el,index)=>{el.index = index+1;return el})" />
            </template>
        </div>
    </div>
</template>

<script>
import ImageViewer from './image-viewer'
import DetectTable from './defect-table'
import { LevelOptions, AdviceOptions } from '@/views/maintenance-decision/constants'

const columns = [
    {
        attrs: {
            label: '序号',
            prop: 'index',
            width: '64',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '检查内容',
            prop: 'checkContent',
            width: '150',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '上报类型',
            prop: 'type',
            width: '130',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '异常描述（性质、范围、程度）',
            prop: 'description',
            'min-width': '240',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '养护措施意见',
            prop: 'advice',
            formatter: (r, c, val) => {
                const target = AdviceOptions.find(item => item.value === Number(val)) || {}
                return target.label || '暂无'
            },
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    },
    {
        attrs: {
            label: '备注',
            prop: 'remark',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    }
]
export default {
    name: 'InspectionItem',
    components: {
        ImageViewer,
        DetectTable
    },
    props: {
        info: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            columns: []
        }
    },
    created() {
        const formatColumns = [...columns]
        switch (this.info.inspectionType) {
            case 3:
            case 4:
                this.columns = Object.freeze([...columns])
                break
            case 5:
                formatColumns.splice(2, 0, {
                    attrs: {
                        label: '位置/桩号',
                        prop: 'location',
                        width: '130',
                        'show-overflow-tooltip': true
                    }
                })
                this.columns = Object.freeze(formatColumns)
                break
            case 6:
                formatColumns.splice(1, 0, {
                    attrs: {
                        label: '位置/桩号',
                        prop: 'location',
                        width: '130',
                        'show-overflow-tooltip': true
                    }
                })
                // formatColumns.splice(4, 0, {
                //     attrs: {
                //         label: '检查情况',
                //         prop: 'checkSituation',
                //         width: '130',
                //         'show-overflow-tooltip': true
                //     }
                // })
                formatColumns.splice(6, 0, {
                    attrs: {
                        label: '判定',
                        prop: 'level',
                        width: '130',
                        formatter: (r, c, val) => {
                            const target = LevelOptions.find(item => item.value === Number(val)) || {}
                            return target.label || '暂无'
                        },
                        'show-overflow-tooltip': true
                    }
                })
                this.columns = Object.freeze(formatColumns)
                break
            case 7:
                formatColumns.splice(
                    2,
                    1,
                    {
                        attrs: {
                            label: '部位',
                            prop: 'part',
                            width: '130',
                            'show-overflow-tooltip': true
                        }
                    },
                    {
                        attrs: {
                            label: '设备名称',
                            prop: 'name',
                            width: '130',
                            'show-overflow-tooltip': true
                        }
                    },
                    {
                        attrs: {
                            label: '检查情况',
                            prop: 'checkSituation',
                            width: '130',
                            'show-overflow-tooltip': true
                        }
                    }
                )
                formatColumns.splice(6, 0, {
                    attrs: {
                        label: '判定',
                        prop: 'level',
                        width: '130',
                        formatter: (r, c, val) => {
                            if (Number(val) === 1) {
                                return '严重'
                            }
                            if (Number(val) === 2) {
                                return '一般'
                            }
                            return val
                        },
                        'show-overflow-tooltip': true
                    }
                })
                this.columns = Object.freeze(formatColumns)
                break
            default:
                this.columns = Object.freeze(formatColumns)
        }
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.inspection-item {
    width: 100%;
    font-size: 14px;
    .header {
        height: 32px;
        line-height: 32px;
        background-color: #f9fafb;
        padding-left: 10px;
        font-weight: bold;
    }
    .body {
        width: 100%;
        border: 1px solid #f2f2f2;
        border-radius: 0 0 5px 5px;
        border-top-width: 0;
        box-sizing: border-box;
        padding: 20px;
        .images-list {
            margin-bottom: 20px;
            display: flex;
            .label {
                width: 60px;
                font-size: 14px;
            }
            .images-container {
                width: calc(100% - 60px);
            }
        }
    }
}
</style>
